/**
 * @Description:登录主入口
 * @author 云离
 * @date: 2018/12/28
 */
import React, { Component } from 'react'
import {message, Button, Modal, Input } from 'antd'
import axios from "../../../../apis/api";
import qs from "qs";
import qrcode from 'qrcode'

class GoogleCheck extends Component {

    state = {
        loading: false,
        hadBind: false,
        showCodeDlg: false,
        code: '',
        qrcode: '',
        secretKey: ''
    }

    openBindDlg = () => {
        this.setState({
            showCodeDlg: true
        })
    }
    handleOk = async () => {
        const {code, hadBind, secretKey} = this.state
        let url = ''
        if (!hadBind) {
            url = '/system/user/bindGoogle'
        } else {
            url = '/system/user/unBindGoogle'
        }
        try {
            const result = await axios.post(url, qs.stringify({
                secretKey,
                code
            }))
            if (result.code === 0) {
                this.setState({
                    hadBind: !hadBind
                })
                this.handleCancel()
                message.success('操作成功')
            } else {
                message.error(result.msg)
            }
        } catch (e) {
        }
    }
    handleCancel = () => {
        this.setState({
            showCodeDlg: false,
            code: ''
        })
        this.checkBind()
    }
    handleTextChange = ({ target: { value } }) => {
        this.setState({
            code: value
        })
    }
    componentDidMount() {
        this.checkBind()
    }
    checkBind = async () => {
        try {
            const result = await axios.get('system/user/hasBindGoogle')
            if (result.data !== true) {
                this.setState({
                    hadBind: false,
                    qrcode: result.data.googleAuthQRCodeData,
                    secretKey: result.data.secretKey
                })
                const canvas = document.getElementById('canvas')
                qrcode.toCanvas(canvas, result.data.googleAuthQRCodeData, function (error) {
                    if (error) console.error(error)
                    console.log('success!');
                })
            } else {
                this.setState({
                    hadBind: true,
                })
            }
        }catch (e) {

        }
    }

    render() {
        const {hadBind, code} = this.state
        return (
            <div>
                {!hadBind? (<div style={{'textAlign': 'center'}}>
                    <canvas id="canvas"></canvas>
                    <p style={{fontSize: 19}}>1、请前往appstore【苹果】或各大应用市场【安卓】搜索Google Authenticator</p>
                    <p style={{fontSize: 19}}>2、扫描上方二维码，扫描成功后请点击下方按钮</p>
                    <Button type={'primary'} onClick={this.openBindDlg}>扫码成功，请点击这里完成绑定</Button>
                </div>): (
                    <div style={{'textAlign': 'center'}}>
                        <p style={{fontSize: 19}}>您已成功绑定</p>
                        <Button type={'primary'} onClick={this.openBindDlg}>立即解绑</Button>
                    </div>
                )}
                <Modal
                    title="请输入谷歌验证器上的验证码"
                    visible={this.state.showCodeDlg}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText={'提交'}
                    cancelText={'取消'}
                    >
                    <p>
                        <Input value={code} onChange={this.handleTextChange}/>
                    </p>
                </Modal>
            </div>

        )
    }
}

export default GoogleCheck
